<template>
  <div class="scheme_box">
    <div style=" padding-top: 80px">
      <transition name="slide-fade">
        <div v-show="schemeShow">
          <p class="title">
            对你的客户、员工和投资者来说，在你的ESG绩效之旅中迈出下一步从未像现在这样重要。
          </p>
          <span class="text">
            后羿零碳帮助客户制定ESG改进方案，降低风险，提高安全性、可持续性和生产率。
          </span>
        </div>
      </transition>
    </div>
    <div class="row_box">
      <div class="row">
        <div
          class="bg_left_box"
          :style="{ left: scheme_offtop_1_show ? '0' : '' }"
        ></div>
        <div class="content">
          <a-row>
            <a-col :xl="{ span: 12, offset: 12 }"   :lg="{ span: 12, offset: 12 }"  :xs="24" class="text">
              <div
                class="con"
                :style="{ 'margin-left': scheme_offtop_1_show ? '0' : '' }"
              >
                <p>可持续的未来</p>
                <div>
                  降低风险，吸引投资者，增加收入，提升品牌并降低您的成本与后羿零碳的集成环境、社会和治理(ESG)管理解决方案。我们帮助减少暴露在环境风险和驱动您的织迈向可持续发展的未来。
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>

      <div class="row img_2">
        <div
          class="bg_right_box"
          :style="{ right: scheme_offtop_2_show ? '0' : '' }"
        ></div>
        <div class="content">
          <a-row>
            <a-col :xl="12"  :lg="12" :xs="24" class="text text1">
              <div
                class="con1"
                :style="{ 'margin-left': scheme_offtop_2_show ? '0' : '' }"
              >
                <p>世界一流的安全文化</p>
                <div>
                  通过综合ESG解决方案保护您的员工和客户，提高人员、流程和产品的安全性。我们帮助企业建立世界级的安全文化，提升他们的全球声誉。
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>

      <div class="row img_3">
        <div
          class="bg_left1_box"
          :style="{ left: scheme_offtop_3_show ? '0' : '' }"
        ></div>
        <div class="content">
          <a-row>
            <a-col :xl="{ span: 12, offset: 12 }" :lg="{ span: 12, offset: 12 }" :xs="24" class="text">
              <div
                class="con"
                :style="{ 'margin-left': scheme_offtop_3_show ? '0' : '' }"
              >
                <p>一个富有成效和成功的企业</p>
                <div>
                  我们的创新软件连接人员、流程和信息，帮助正确的人在正确的时间获得正确的安全、风险和可持续发展信息，从而提高生产力。我们帮助破解被困在过时工具和手写表格中的信息孤岛。
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    "schemeShow",
    "scheme_offtop_1_show",
    "scheme_offtop_2_show",
    "scheme_offtop_3_show",
  ],
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .con1 {
    width: 100%;
    margin-left: -100%;
    transition: margin-left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
  }
  .scheme_box {
    .title {
      padding:0 30px; 
      width: 1200px;
      margin: 0 auto;
      font-weight: 400;
      font-size: 52px !important;
      line-height: 60px !important;
      margin-bottom: 20px;
      color: #000;
      font-family: "Roboto-Black-1";
    }
    .text {
      padding: 0 200px;
      text-align: center;
      font-family: "Roboto-Italic-9";
      color: #666;
      // line-height: 50px;
      font-size: 15px;
      overflow: hidden;
      .con {
        width: 100%;
        margin-left: 100%;
        transition: margin-left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
      }
    }
    .row_box {
      margin-top: 90px;
      .row {
        height: 500px;
        margin-top: 50px;

        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        .bg_left_box {
          //   transition: .5s;
          transition: left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          position: absolute;
          height: 500px;
          width: 50%;
          top: 0;
          left: -50%;
          background: url("../../assets/img/bg_1.jpg") no-repeat center;
          background-size: cover;
        }
        .bg_right_box {
          transition: right 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          overflow: hidden;
          position: absolute;
          // right: 0;
          height: 500px;
          width: 50%;
          top: 0;
          right: -50%;
          background: url("../../assets/img/bg_2.jpg") no-repeat center;
          background-size: cover;
        }
        .bg_left1_box {
          transition: left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          position: absolute;
          height: 500px;
          width: 50%;
          top: 0;
          left: -50%;
          background: url("../../assets/img/bg_3.jpg") no-repeat center;
          background-size: cover;
        }
        .content {
          width: 1200px;
          margin: auto;
          .text1 {
            padding: 0px 100px 0px 0px !important;
          }
          .text {
            padding: 0px 0px 0 100px;
            p {
              font-size: 32px;
              text-align: left;
              // font-weight: 700 !important;
              font-family: "Roboto-Black-1";
              margin-bottom: 30px !important;
              color: #000;
            }
            div {
              font-size: 18px;
              font-family: "Roboto-Italic-9";
              line-height: 30px;
              color: #333;
              text-align: left;
            }
          }
        }
      }
    }
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .con1 {
    width: 100%;
    margin-left: -100%;
    padding:  0 0 0 30px;
    transition: margin-left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
  }
  .scheme_box {
    .title {
      width: 100%;
      padding:0 30px; 
      margin: 0 auto;
      font-weight: 400;
      font-size: 40px !important;
      line-height: 60px !important;
      margin-bottom: 20px;
      color: #000;
      font-family: "Roboto-Black-1";
    }
    .text {
      padding: 0 200px;
      text-align: center;
      font-family: "Roboto-Italic-9";
      color: #666;
      // line-height: 50px;
      font-size: 15px;
      overflow: hidden;
      .con {
        width: 100%;
        padding:  0 30px 0 0;
        margin-left: 100%;
        transition: margin-left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
      }
    }
    .row_box {
      margin-top: 90px;
      .row {
        height: 500px;
        margin-top: 50px;

        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        .bg_left_box {
          //   transition: .5s;
          transition: left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          position: absolute;
          height: 500px;
          width: 50%;
          top: 0;
          left: -50%;
          background: url("../../assets/img/bg_1.jpg") no-repeat center;
          background-size: cover;
        }
        .bg_right_box {
          transition: right 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          overflow: hidden;
          position: absolute;
          // right: 0;
          height: 500px;
          width: 50%;
          top: 0;
          right: -50%;
          background: url("../../assets/img/bg_2.jpg") no-repeat center;
          background-size: cover;
        }
        .bg_left1_box {
          transition: left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          position: absolute;
          height: 500px;
          width: 50%;
          top: 0;
          left: -50%;
          background: url("../../assets/img/bg_3.jpg") no-repeat center;
          background-size: cover;
        }
        .content {
          width: 100%;
          margin: auto;
          .text1 {
            padding: 0px 100px 0px 0px !important;
          }
          .text {
            padding: 0px 0px 0 100px;
            p {
              font-size: 32px;
              text-align: left;
              // font-weight: 700 !important;
              font-family: "Roboto-Black-1";
              margin-bottom: 30px !important;
              color: #000;
            }
            div {
              font-size: 18px;
              font-family: "Roboto-Italic-9";
              line-height: 30px;
              color: #333;
              text-align: left;
            }
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .con1 {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    padding: 30px 20px;
    margin-left: -100%;
    transition: margin-left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
  }
  .scheme_box {
    padding: 0 0px;
    .title {
      width: 100%;
      padding: 0 20px;
      margin: 0 auto;
      font-weight: 400;
      font-size: 22px !important;
      line-height: 30px !important;
      margin-bottom: 20px;
      color: #000;
      font-family: "Roboto-Black-1";
    }
    .text {
      padding: 0 20px;
      text-align: center;
      font-family: "Roboto-Italic-9";
      color: #666;
      // line-height: 50px;
      font-size: 15px;
      overflow: hidden;
      .con {
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        padding: 30px 20px;
        margin-left: 100%;
        transition: margin-left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
      }
    }
    .row_box {
      margin-top: 20px;
      .row {
        height: 400px;

        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        .bg_left_box {
          //   transition: .5s;
          transition: left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          position: absolute;
          height: 400px;
          width: 100%;
          top: 0;
          left: -100%;
          background: url("../../assets/img/bg_1.jpg") no-repeat center;
          background-size: cover;
        }
        .bg_right_box {
          transition: right 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          overflow: hidden;
          position: absolute;
          // right: 0;
          height: 400px;
          width: 100%;
          top: 0;
          right: -100%;
          background: url("../../assets/img/bg_2.jpg") no-repeat center;
          background-size: cover;
        }
        .bg_left1_box {
          transition: left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          position: absolute;
          height: 400px;
          width: 100%;
          top: 0;
          left: -100%;
          background: url("../../assets/img/bg_3.jpg") no-repeat center;
          background-size: cover;
        }
        .content {
          width: 100%;
          margin: auto;
          .text1 {
            padding: 0px 0px 0px 0px !important;
          }
          .text {
            padding: 0px 0px 0 0px;
            p {
              font-size: 24px;
              text-align: center;
              // font-weight: 700 !important;
              font-family: "Roboto-Black-1";
              margin-bottom: 20px !important;
              color: #fff;
            }
            div {
              font-size: 16px;
              font-family: "Roboto-Italic-9";
              line-height: 30px;
              color: #fff;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .con1 {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    padding: 30px 20px;
    margin-left: -100%;
    transition: margin-left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
  }
  .scheme_box {
    background: #fff;
    padding: 0 0px;
    .title {
      width: 100%;
      padding: 0 20px;
      margin: 0 auto;
      font-weight: 400;
      font-size: 22px !important;
      line-height: 30px !important;
      margin-bottom: 20px;
      color: #000;
      font-family: "Roboto-Black-1";
    }
    .text {
      padding: 0 20px;
      text-align: center;
      font-family: "Roboto-Italic-9";
      color: #666;
      // line-height: 50px;
      font-size: 15px;
      overflow: hidden;
      .con {
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        padding: 30px 20px;
        margin-left: 100%;
        transition: margin-left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
      }
    }
    .row_box {
      margin-top: 20px;
      .row {
        height: 400px;

        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        .bg_left_box {
          //   transition: .5s;
          transition: left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          position: absolute;
          height: 400px;
          width: 100%;
          top: 0;
          left: -100%;
          background: url("../../assets/img/bg_1.jpg") no-repeat center;
          background-size: cover;
        }
        .bg_right_box {
          transition: right 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          overflow: hidden;
          position: absolute;
          // right: 0;
          height: 400px;
          width: 100%;
          top: 0;
          right: -100%;
          background: url("../../assets/img/bg_2.jpg") no-repeat center;
          background-size: cover;
        }
        .bg_left1_box {
          transition: left 1s cubic-bezier(0.25, 1, 0.33, 1) 0.2s;
          position: absolute;
          height: 400px;
          width: 100%;
          top: 0;
          left: -100%;
          background: url("../../assets/img/bg_3.jpg") no-repeat center;
          background-size: cover;
        }
        .content {
          width: 100%;
          margin: auto;
          .text1 {
            padding: 0px 0px 0px 0px !important;
          }
          .text {
            padding: 0px 0px 0 0px;
            p {
              font-size: 24px;
              text-align: center;
              // font-weight: 700 !important;
              font-family: "Roboto-Black-1";
              margin-bottom: 20px !important;
              color: #fff;
            }
            div {
              font-size: 16px;
              font-family: "Roboto-Italic-9";
              line-height: 30px;
              color: #fff;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>